<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="user.name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="user.age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="user.sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="handleClick">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in arr" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.sex }}</td>
            <td>
              <button>删除</button>
              <button @click="handleEdit(item, index)">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Xsxxgl',
  data() {
    return {
      idEdit: false,
      index: 0, // 要编辑的索引
      user: {
        name: '',
        age: '',
        sex: '',
      },
      arr: [
        {
          name: 'Tom',
          age: 19,
          sex: '男',
        },
        {
          name: 'Jone',
          age: 21,
          sex: '女',
        },
      ],
    }
  },
  methods: {
    handleClick() {
      if (!this.user.name || !this.user.age || !this.user.sex) {
        return alert('不能为空')
      }
      if (this.isEdit) {
        // 编辑
        this.arr[this.index] = { ...this.user }
        // !完事之后 isEdit 置为初始值
        this.isEdit = false
      } else {
        // 【添加，关于添加对象时候的注意点】
        this.arr.push({ ...this.user })
      }
      this.user.name = ''
      this.user.age = ''
      this.user.sex = ''
    },
    handleEdit(item, index) {
      this.user = { ...item }
      this.isEdit = true
      // !记录要编辑的索引
      this.index = index
    },
  },
}
</script>
